<template>
	<view>
		<view class="task">
			<!-- 整个任务部分都在 task-header 中 -->
			<view class="task-header" @click="toggleTaskContent">
				<view class="task-name">
					<view style="width: 90%;">{{this.inspectionDataName}}</view>
					<uni-icons type="down" size="30" v-if="this.isTaskContentVisible === false" class="task-icon" @tap="()=>{this.isShow = true}"></uni-icons>
					<uni-icons type="up"  size="30" v-else class="task-icon" @tap="()=>{this.isShow = false}"></uni-icons>
				</view>
				<!-- 任务详细信息 -->
				<view class="task-details-wrapper" :class="{ 'expanded': isTaskContentVisible }">
					<view class="task-details">
						<view class="task-item">检查项目：{{this.inspectionDataDesc}}</view>
						<view class="task-item">任务区域：{{this.mapName}}</view>
						<view class="task-item">
							<view>任务状态：</view>
							<view>
								<view style="color: #4CAF50;" v-if="this.inspectionDetailStatus === 0">处理中</view>
								<view style="color: red;" v-else-if="this.inspectionDetailStatus === 1">已超时</view>
								<view style="color: #0A60BD;" v-else-if="this.inspectionDetailStatus === 2">已完成</view>
								<view style="color: grey;" v-else-if="this.inspectionDetailStatus === 3">已取消</view>
								<view style="color: red;" v-else-if="this.inspectionDetailStatus === 4">异常</view>
								<view style="color: grey;" v-else-if="this.inspectionDetailStatus === 6">未开始</view>
							</view>
						    
						</view>
						<view class="task-item">任务机组：{{this.unitName}}</view>
						<view class="task-item">任务班组：{{this.inspectionDetailClass}}</view>
						<view class="task-item">任务点位号：{{this.mapDetailId}}</view>
						<view class="task-item">任务点位描述：{{this.mapDetailDesc}}</view>
						<view class="task-item">任务巡检员：{{this.inspectionDetailUser}}</view>
					</view>
				</view>
			</view>
			<view class="task-body">
				<!-- 数据表单 -->
				<view class='data-title'></view>
				<view v-for="(group, index) in inspectionGroups" :key="index" class="task-content">
					<view class="task-left">{{ group.attribute }}</view>
					<view class="task-right">
						<view style="color: black;padding-right: 20px;">{{group.value}}</view>
<!-- 						<input type="text" v-model="group.value" placeholder="请输入数据" class="task-input"/> -->
						<span>{{ group.perUnit }}</span>
					</view>
				</view>
				<!-- 图片 -->
				<view class="photos">
					<view class="photo-box">
						<view class="photo" v-for="(item,index) in list">
							<image :src="item" class="photo" mode="aspectFill" @tap="checkPhoto(item)" draggable />
							<!-- <view @click.stop="delImage(index)" style="display: inline;" class="delPhoto">
								<uni-icons type="closeempty" class="close" size="20"></uni-icons>
							</view> -->
						</view>
					</view>
					<!-- 带相机图标的拍摄图片组件 -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import request from '../../../common/request';
export default {
		data() {
			return {
				username: "苏建宁",
				isShow:false,
				isTaskContentVisible: false, // 控制任务信息显示的状态
				inspectionDataName: '',  // 检查项目名称
				inspectionDataDesc: '',  // 检查项目描述
				taskStatus: '',          // 任务状态
				unitName: '',            // 机组名称
				mapDetailId: '',         // 地图点位号
				mapDetailDesc: '',       // 地图点位描述
				inspectionDetailUser: '',// 检查人
				inspectionDetailClass: '',// 部门
				inspectionGroupId: '',   // 组别
				inspectionDetailNote: '',// 检查备注
				inspectionDetailScore: '',// 评分
				mapName: ''              ,// 地图名称
				inspectionDetailStatus:'' ,//任务状态
				inspectionDetailId: '',
				inspectionGroups:[],
				inspectionDetailDatas:[],
				list:[],//图片列表
			};
		},
		onLoad(options) {
			// 从 URL 参数中获取任务详细信息
			this.inspectionDataName = options.inspectionDataName || 'N/A';
			this.inspectionDataDesc = options.inspectionDataDesc || 'N/A';
			this.taskStatus = options.inspectionDetailStatus === '0' ? '处理中' : options.inspectionDetailStatus === '1' ? '已超时' : '已完成';
			this.unitName = options.unitName || 'N/A';
			this.mapDetailId = options.mapDetailId || 'N/A';
			this.mapDetailDesc = options.mapDetailDesc || 'N/A';
			this.inspectionDetailUser = options.inspectionDetailUser || 'N/A';
			this.inspectionDetailClass = options.inspectionDetailClass || 'N/A';
			this.inspectionGroupId = options.inspectionGroupId || 'N/A';
			this.inspectionDetailNote = options.inspectionDetailNote || 'N/A';
			this.inspectionDetailScore = options.inspectionDetailScore || 'N/A';
			this.mapName = options.mapName || 'N/A';
			this.inspectionDetailStatus = options.inspectionDetailStatus || 'N/A';
			this.inspectionDetailId = options.inspectionDetailId || 'N/A';
			this.inspectionDetailDatas = JSON.parse(decodeURIComponent(options.inspectionDetailDatas)) || 'N/A';
			this.getPhotos()
			this.getGroup()
		},
		methods: {
			toggleTaskContent() {
				this.isTaskContentVisible = !this.isTaskContentVisible;
			},
			takePhoto() {
				uni.chooseImage({
					count: 1,
					sourceType: ['camera'],
					success: (res) => {
						this.photoSrc = res.tempFilePaths[0];
					},
					fail: (err) => {
						console.error('拍摄失败:', err);
					}
				});
			},
			getUserById(){
				
			},
			getGroup(){
				request(`/inspection/data/${this.inspectionGroupId}`).then(res=>{
					this.inspectionGroups = res.data.data
					console.log("获取任务数据")
					console.log(this.inspectionGroups)
					this.getData()
				})
			},
			checkPhoto(item) {
				//查看图片
				console.log("图片路径为：" + item)

				uni.previewImage({
					current: item,
					urls: [item]
				})
			},
			getPhotos(){
				request(`/inspection/pictures/${this.inspectionDetailId}`,'GET').then(res => {
					console.log("获取图片路径")
					console.log(res)
					this.list = res.data.data
				})
			},
			getData(){
				console.log(this.inspectionGroupId)
				console.log(this.inspectionDetailDatas)
				console.log(this.inspectionGroups)
				for (let i = 0 ; i < this.inspectionDetailDatas.length ; i ++){
					this.inspectionGroups[i].value = this.inspectionDetailDatas[i].groupValue
				}
				console.log("输出任务数据")
				console.log(this.inspectionGroups)
			}
		}
	}
</script>

<style>

	.task-header {
		display: flex;
		flex-direction: column;
		align-items: left;
		background-color: #fff;
		padding: 20px;
		margin: 10px;
		border-radius: 20px;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.15);
		cursor: pointer;
		transition: all 0.5s ease; /* 修改为 0.5s，与内容展开速度一致 */
	}
	.task-icon{
		align-self: center;
	}
	.task-details-wrapper {
		overflow: hidden;
		transition: max-height 0.5s ease; /* 修改为 0.5s，与标题速度一致 */
		max-height: 0; /* 初始状态下内容不可见 */
	}
	.task-details-wrapper.expanded {
		max-height: 500px; /* 根据内容调整 */
	}
	.task-details {
		margin-top: 20px; /* 保证内容与标题有些间距 */
		font-size: 18px;
	}
	.task-item {
		margin-bottom: 10px;
		display: flex;
	}
	.task-tip {
		padding: 20px;
	}
	.task-name {
		font-size: 25px;
		display: flex;
	}
	.task-body {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}
	.task-content {
		width: 90%;
		display: flex;
		align-items: center;
		justify-content: space-between; /* 对齐任务内容的左右两侧 */
		padding: 20px;
		background-color: #fff;
		margin: 10px;
		border-radius: 20px;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.15);
	}
	.task-left {
			flex: 1; /* 左侧部分占据剩余空间 */
		}
		.task-right {
			font-size: 20px;
			color: #4CAF50;
			display: flex;
			align-items: center;
		}
	.view-map-btn {
		background-color: #4CAF50;
		color: white;
		padding: 10px 20px;
		text-align: center;
		border-radius: 5px;
		margin-top: 10px;
		cursor: pointer;
		transition: background-color 0.3s ease;
	}
	.view-map-btn:hover {
		background-color: #45a049;
	}
	.tips {
		text-align: center;
	}
	.data-title{
		margin-top: 40px;
	}
	.camera-section {
			margin-top: 20px;
			text-align: center;
		}
		.camera-button {
			background-color: #4CAF50;
			color: white;
			padding: 10px 20px;
			border-radius: 5px;
			cursor: pointer;
			transition: background-color 0.3s ease;
		}
		.camera-button:hover {
			background-color: #45a049;
		}
		.captured-photo {
			margin-top: 10px;
			width: 100%;
			height: auto;
			border-radius: 5px;
		}
		.photos {
			width: 80%;
		}
		.photo-box {
			width: 100%;
			height: 180rpx;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			margin-bottom: 20px;
		}
		
		.photo {
			width: 180rpx;
			height: 180rpx;
			margin: 3px;
			position: relative;
		}
</style>